<template>
  <div>
    <p>{{ $route.meta.title }} {{ $dayjs().format('YYYY[年]MM[月]DD[日]HH:mm:ss') }}</p>
    <block-title title="轻提示"></block-title>
    <div class="padding">
      <el-button type="primary" @click="onClick1">Message</el-button>
      <el-button type="primary" @click="onClick2">Alert</el-button>
      <el-button type="primary" @click="onClick3">Confirm</el-button>
      <el-tooltip content="这是Tooltip，默认是一行，可以设置content slot">
        <el-button type="primary">Tooltip</el-button>
      </el-tooltip>
      <el-button type="primary" v-popover:popover>Popover</el-button>
      <el-popconfirm title="确定删除吗" style="margin-left: 10px;">
        <el-button slot="reference" type="danger">PopConfirm</el-button>
      </el-popconfirm>
      <el-popover ref="popover" title="Popover标题" content="content属性或插槽，这里可以放很多内容"></el-popover>
    </div>
    <block-title title="选择图标"></block-title>
    <div class="padding">
      <select-icon placement="right" :width="700" :height="400">
        <el-button type="primary" slot-scope="{ selectedIcon }" class="">
          <span v-if="selectedIcon">
            <svg-icon :name="selectedIcon" class="selected-icon"></svg-icon>
            {{ selectedIcon }}
          </span>
          <span v-else>选择图标</span>
        </el-button>
      </select-icon>
    </div>
    <block-title title="功能弹框"></block-title>
    <div class="padding">
      <el-button type="primary" @click="onClick4">
        <svg-icon name="add"></svg-icon>
        新增
      </el-button>
      <custom-dialog
        ref="dialog" title="新增用户" height="400px"
        :before-confirm="beforeConfirm" :on-confirm="onConfirm"
      >
        <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="form-box">
          <el-form-item label="姓名" prop="realName">
            <el-input v-model="form.realName"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="form.sex">
              <el-radio :label="0">男</el-radio>
              <el-radio :label="1">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="出生年月">
            <el-date-picker
              v-model="form.birth" type="date" class="width-100"
              format="yyyy-MM-dd" value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="喜好">
            <el-select v-model="form.hobby" class="width-100">
              <el-option label="篮球" value="0"></el-option>
              <el-option label="阅读" value="1"></el-option>
              <el-option label="游戏" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="网关编号">
            <el-input v-model="form.number"></el-input>
          </el-form-item>
          <el-form-item label="网关名称">
            <el-input v-model="form.network"></el-input>
          </el-form-item>
          <el-form-item label="安装方式">
            <el-input v-model="form.method"></el-input>
          </el-form-item>
          <el-form-item label="规格型号">
            <el-input v-model="form.type"></el-input>
          </el-form-item>
          <el-form-item label="安装位置">
            <el-input v-model="form.place"></el-input>
          </el-form-item>
          <el-form-item label="生产厂家">
            <el-input v-model="form.factory"></el-input>
          </el-form-item>
          <el-form-item label="IP地址">
            <el-input v-model="form.ip"></el-input>
          </el-form-item>
        </el-form>
      </custom-dialog>
    </div>
    <block-title title="HTTP请求"></block-title>
    <div class="padding">
      <el-button type="primary" @click="postData">Post</el-button>
    </div>
  </div>
</template>

<script>
import BlockTitle from '@/components/block-title'
import SelectIcon from '@/components/select-icon'
import CustomDialog from '@/components/custom-dialog'
import request from '@/utils/request'

export default {
  name: 'EnterpriseWorkBench',
  components: {
    BlockTitle,
    SelectIcon,
    CustomDialog
  },
  data () {
    return {
      form: {
        realName: '',
        sex: 0,
        birth: '',
        hobby: '',
        number: '',
        network: '',
        type: '',
        method: '',
        place: '',
        factory: '',
        ip: ''
      },
      rules: {
        realName: [
          {
            required: true,
            message: '必填项'
          }
        ]
      }
    }
  },
  methods: {
    onClick1 () {
      this.$message.error('表单校验不成功')
    },
    onClick2 () {
      this.$alert('恭喜你，申请成功！', '温馨提示', {
        showClose: false
      })
    },
    onClick3 () {
      this.$confirm('您确定要删除该数据吗？', '操作提示', {
        showClose: false
      }).then((res) => {
        this.$message.success('已提交')
      }).catch(() => {
        this.$message.warning('已取消')
      })
    },
    onClick4 () {
      this.form = this.$options.data().form
      if (this.$refs.form) {
        this.$refs.form.resetFields()
      }
      this.$nextTick(() => {
        this.$refs.dialog.open()
      })
    },
    beforeConfirm () {
      return this.$refs.form.validate()
    },
    onConfirm (close) {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve()
          this.$message.success('提交成功')
          close()
        }, 1000)
      })
    },
    postData () {
      request({
        url: '/sysUser/saveOrUpdateUser',
        method: 'post',
        data: {
          userName: '张三',
          phone: '13666336633',
          email: 'test@qq.com'
        }
      }).then(res => {
        console.log(res)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .form-box {
    &:after {
      content: '';
      display: table;
      clear: both;
    }
  }
  .form-box ::v-deep .el-form-item {
    @media screen and (min-width: 1400px) {
      float: left;
      width: 50%;
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
</style>
